<template>
  <view class="container">
    <u-navbar
      :is-fixed="true"
      :border-bottom="false"
      :is-back="true"
      :background="{ background: '#fff' }"
      :title="otherName"
      title-color="#000"
    >
    </u-navbar>
		<u-toast ref="uToast" />
    <view class="chat">
      <view v-for="chat in chats">
        <view v-if="chat.from == 'me'" class="me">
          <view class="content">{{chat.content}}</view>
          <view class="circle">我</view>
        </view>
        <view v-if="chat.from == 'bot'" class="bot">
          <view class="circle">{{ otherName.slice(0, 2) }}</view>
          <view class="content">{{chat.content}}</view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <u-input style="width: 90%;" v-model="content" :border="false" />
      <view class="fasong" @click="send">发送</view>
    </view>
  </view>
</template>

<script>
import { getChat,updateChat} from "../../api/system/api";
export default {
  data() {
    return {
      userInfo: {},
      chats: [
        {
          from: 'bot',
          content: '你好，有什么可以帮助您',
          isRead: false
        }
      ],
      content: '',
      msgs: {
        '退货': '请至【我的】退换/售后 中进行操作',
        '售后': '请至【我的】退换/售后 中进行操作',
      },
      chatId: '',
      otherName: ''
    };
  },
  onLoad(option) {
    this.chatId = Number(option.chatId)
    this.userInfo = JSON.parse(option.userInfo)
    console.log(this.userInfo)
    this.getChat()
  },
  methods: {
    send() {
      if (!this.content) {
        this.$refs.uToast.show({
          title: '请输入',
          type: 'error',
        })
        return
      }
      this.chats.push({
        from: 'me',
        content: this.content,
        id: this.userInfo.id,
        isRead: false
      })
      this.content = ''
      let contents = JSON.parse(JSON.stringify(this.chats))
      contents = contents.map(v => {
        return {
          content: v.content,
          id: v.id,
          isRead: v.isRead,
        }
      })
      updateChat(this.chatId, {
        contents: JSON.stringify(contents)
      }).then(res => {
        console.log(res)
      })
      this.$forceUpdate();
    },
    getChat() {
      getChat({
        id: this.chatId
      }).then(res => {
        let chat = res.data.data[0]
        console.log(chat)
        let chats = JSON.parse(chat.contents)
        this.otherName = this.userInfo.role == '咨询师' ? chat.author.name : chat.teacher.name
        this.chats = chats.map(v => {
          return {
            ...v,
            from: this.userInfo.id == v.id ? 'me' : 'bot'
          }
        })
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  overflow: hidden;
  background: #fafafa;
}
.chat{
  width: 100%;
  height: 80vh;
  overflow: hidden;
  overflow-y: scroll;
  padding: 30rpx;
}
.bottom {
  position: fixed;
  bottom: 30rpx;
  width: 96%;
  left: 2%;
  height: 80rpx;
  text-align: center;
  background: #fff;
  font-size: 30rpx;
  font-weight: bold;
  line-height: 80rpx;
  border-radius: 80rpx;
  display: flex;
  justify-content: space-between;
}
.fasong {
  color: blueviolet;
}
.me {
  padding-left: 40%;
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  justify-content: flex-end;
}
.bot {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}
.circle {
  width: 80rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  border-radius: 50%;
  border: 1rpx solid lightcoral;
}
.content {
  background: lightpink;
  padding: 20rpx;
  border-radius: 10rpx;
  margin: 0 20rpx;
}
</style>
